<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
        <link rel="stylesheet" href="../script/bootstrap-3.3.7.min.css">
            <style type="text/css">
            button:hover{
                color: red;
                font-size: 1.5em;
            }
            p{
                margin: 15px;
            }
            </style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-6">
            <div>
                <img src="img/边框.JPG">
            </div>
        </div>

        <div class="col-md-6">
            <div>
                <img src="img/边框1.JPG">
            </div>

        </div>
    </div>
<div class="row">
    <div class="col-md-6 col-md-offset-4">
        <p style="color: red;font-size: 2em">padding 内边距</p>
    </div>
</div>
    <div class="row">
            <div class="col-md-4">
                <button style="padding: 20px 10px 10px 10px">padding 直接定义4个属性</button>
            </div>
            <div class="col-md-4">
                <button style="padding-top:10px;padding-left: 10px">分别padding-top,left,right,bottom,只定义上和左</button>
            </div>
            <div class="col-md-4">
                <button style="padding-right:2em;padding-bottom: 10%">只定义下和右,单位 em,px,百分比</button>
            </div>
    </div>
<div class="row">
    <div class="col-md-6 col-md-offset-4">
        <p style="color: red;font-size: 2em">margin 外边距</p>
    </div>
</div>
        <div class="row">
            <div class="col-md-4">
                <button style="margin: 20px 10px 10px 10px">margin 直接定义4个属性</button>
            </div>
            <div class="col-md-4">
                <button style="margin-top:10px;margin-left: 10px">分别margin-top,left,right,bottom,只定义上和左</button>
            </div>
            <div class="col-md-4">
                <button style="margin-right:2em;margin-bottom: 10%">只定义下和右,单位 em,px,百分比</button>
            </div>
    </div>
</div>
</body>
</html>